import { useState } from 'react'
import { Card, Table, Tabs, Tag, Progress, Avatar, Space, Select, DatePicker } from 'antd'
import { FireOutlined, TrophyOutlined, RiseOutlined, BookOutlined, UserOutlined, EyeOutlined, HeartOutlined, StarOutlined } from '@ant-design/icons'
import './index.scss'

const { RangePicker } = DatePicker

const PopularContent = () => {
  const [activeTab, setActiveTab] = useState('books')
  const [timeRange, setTimeRange] = useState('week')

  // 热门图书数据
  const popularBooks = [
    {
      key: '1',
      rank: 1,
      bookName: '三体：地球往事',
      bookCover: 'https://img1.doubanio.com/view/subject/s/public/s2768378.jpg',
      author: '刘慈欣',
      category: '科幻小说',
      readCount: 15680,
      favoriteCount: 3245,
      rating: 9.5,
      trend: 'up',
      trendValue: 12.5
    },
    {
      key: '2',
      rank: 2,
      bookName: '活着',
      bookCover: 'https://img2.doubanio.com/view/subject/s/public/s27061786.jpg',
      author: '余华',
      category: '文学小说',
      readCount: 12350,
      favoriteCount: 2856,
      rating: 9.3,
      trend: 'up',
      trendValue: 8.3
    },
    {
      key: '3',
      rank: 3,
      bookName: '百年孤独',
      bookCover: 'https://img1.doubanio.com/view/subject/s/public/s6384944.jpg',
      author: '加西亚·马尔克斯',
      category: '文学小说',
      readCount: 9820,
      favoriteCount: 2145,
      rating: 9.2,
      trend: 'down',
      trendValue: -3.2
    },
    {
      key: '4',
      rank: 4,
      bookName: '人类简史',
      bookCover: 'https://img2.doubanio.com/view/subject/s/public/s28003154.jpg',
      author: '尤瓦尔·赫拉利',
      category: '历史人文',
      readCount: 8560,
      favoriteCount: 1856,
      rating: 9.1,
      trend: 'up',
      trendValue: 15.6
    },
    {
      key: '5',
      rank: 5,
      bookName: '平凡的世界',
      bookCover: 'https://img1.doubanio.com/view/subject/s/public/s1144911.jpg',
      author: '路遥',
      category: '文学小说',
      readCount: 11200,
      favoriteCount: 2456,
      rating: 9.4,
      trend: 'same',
      trendValue: 0
    }
  ]

  // 热门读者数据
  const popularReaders = [
    {
      key: '1',
      rank: 1,
      userId: 1001,
      username: '张三',
      readCount: 156,
      readingTime: 3200,
      favoriteCount: 45,
      level: 'VIP',
      trend: 'up'
    },
    {
      key: '2',
      rank: 2,
      userId: 1002,
      username: '李四',
      readCount: 243,
      readingTime: 4850,
      favoriteCount: 68,
      level: 'VIP',
      trend: 'up'
    },
    {
      key: '3',
      rank: 3,
      userId: 1003,
      username: '王五',
      readCount: 89,
      readingTime: 1560,
      favoriteCount: 23,
      level: '普通',
      trend: 'down'
    },
    {
      key: '4',
      rank: 4,
      userId: 1004,
      username: '赵六',
      readCount: 312,
      readingTime: 5680,
      favoriteCount: 92,
      level: 'VIP',
      trend: 'up'
    },
    {
      key: '5',
      rank: 5,
      userId: 1005,
      username: '孙七',
      readCount: 178,
      readingTime: 2890,
      favoriteCount: 56,
      level: '学生',
      trend: 'same'
    }
  ]

  // 热门分类数据
  const popularCategories = [
    {
      key: '1',
      rank: 1,
      categoryName: '科幻小说',
      bookCount: 1250,
      readCount: 45680,
      readerCount: 8560,
      avgRating: 8.9,
      trend: 'up'
    },
    {
      key: '2',
      rank: 2,
      categoryName: '文学小说',
      bookCount: 2180,
      readCount: 38920,
      readerCount: 7245,
      avgRating: 9.1,
      trend: 'up'
    },
    {
      key: '3',
      rank: 3,
      categoryName: '历史人文',
      bookCount: 856,
      readCount: 28560,
      readerCount: 5680,
      avgRating: 8.7,
      trend: 'same'
    },
    {
      key: '4',
      rank: 4,
      categoryName: '技术编程',
      bookCount: 1420,
      readCount: 25340,
      readerCount: 4890,
      avgRating: 8.5,
      trend: 'down'
    },
    {
      key: '5',
      rank: 5,
      categoryName: '经济管理',
      bookCount: 680,
      readCount: 18920,
      readerCount: 3560,
      avgRating: 8.3,
      trend: 'up'
    }
  ]

  // 热门图书表格列
  const bookColumns = [
    {
      title: '排名',
      dataIndex: 'rank',
      key: 'rank',
      width: 80,
      align: 'center',
      render: (rank) => {
        const colors = ['#faad14', '#d9d9d9', '#d4b106']
        const icons = [<TrophyOutlined />, <TrophyOutlined />, <TrophyOutlined />]
        if (rank <= 3) {
          return (
            <div className="rank-badge" style={{ color: colors[rank - 1] }}>
              {icons[rank - 1]}
              <span>{rank}</span>
            </div>
          )
        }
        return <span className="rank-number">{rank}</span>
      }
    },
    {
      title: '图书信息',
      key: 'bookInfo',
      width: 300,
      render: (_, record) => (
        <div className="book-info-cell">
          <div className="book-cover">
            <img src={record.bookCover} alt={record.bookName} />
          </div>
          <div className="book-details">
            <div className="book-name">{record.bookName}</div>
            <div className="book-meta">
              <span>{record.author}</span>
              <Tag color="blue" size="small">{record.category}</Tag>
            </div>
          </div>
        </div>
      )
    },
    {
      title: '阅读量',
      dataIndex: 'readCount',
      key: 'readCount',
      width: 120,
      align: 'center',
      sorter: (a, b) => a.readCount - b.readCount,
      render: (count) => (
        <div className="stat-cell">
          <EyeOutlined style={{ color: '#1890ff', marginRight: 4 }} />
          <span>{count.toLocaleString()}</span>
        </div>
      )
    },
    {
      title: '收藏量',
      dataIndex: 'favoriteCount',
      key: 'favoriteCount',
      width: 120,
      align: 'center',
      sorter: (a, b) => a.favoriteCount - b.favoriteCount,
      render: (count) => (
        <div className="stat-cell">
          <HeartOutlined style={{ color: '#ff4d4f', marginRight: 4 }} />
          <span>{count.toLocaleString()}</span>
        </div>
      )
    },
    {
      title: '评分',
      dataIndex: 'rating',
      key: 'rating',
      width: 150,
      align: 'center',
      render: (rating) => (
        <div className="rating-cell">
          <Progress
            type="circle"
            percent={rating * 10}
            format={() => rating}
            width={50}
            strokeColor={{
              '0%': '#108ee9',
              '100%': '#87d068',
            }}
          />
        </div>
      )
    },
    {
      title: '趋势',
      key: 'trend',
      width: 120,
      align: 'center',
      render: (_, record) => {
        const trendConfig = {
          up: { icon: <RiseOutlined />, color: '#52c41a', text: '上升' },
          down: { icon: <RiseOutlined style={{ transform: 'rotate(180deg)' }} />, color: '#ff4d4f', text: '下降' },
          same: { icon: '—', color: '#8c8c8c', text: '持平' }
        }
        const config = trendConfig[record.trend]
        return (
          <div className="trend-cell" style={{ color: config.color }}>
            {config.icon}
            <span>{Math.abs(record.trendValue)}%</span>
          </div>
        )
      }
    }
  ]

  // 热门读者表格列
  const readerColumns = [
    {
      title: '排名',
      dataIndex: 'rank',
      key: 'rank',
      width: 80,
      align: 'center',
      render: (rank) => {
        if (rank <= 3) {
          const colors = ['#faad14', '#d9d9d9', '#d4b106']
          return (
            <div className="rank-badge" style={{ color: colors[rank - 1] }}>
              <TrophyOutlined />
              <span>{rank}</span>
            </div>
          )
        }
        return <span className="rank-number">{rank}</span>
      }
    },
    {
      title: '读者信息',
      key: 'readerInfo',
      width: 200,
      render: (_, record) => (
        <div className="reader-info-cell">
          <Avatar icon={<UserOutlined />} size={40} />
          <div className="reader-details">
            <div className="reader-name">{record.username}</div>
            <div className="reader-id">ID: {record.userId}</div>
          </div>
        </div>
      )
    },
    {
      title: '阅读数量',
      dataIndex: 'readCount',
      key: 'readCount',
      width: 120,
      align: 'center',
      sorter: (a, b) => a.readCount - b.readCount,
      render: (count) => <span className="highlight-number">{count}</span>
    },
    {
      title: '阅读时长',
      dataIndex: 'readingTime',
      key: 'readingTime',
      width: 120,
      align: 'center',
      sorter: (a, b) => a.readingTime - b.readingTime,
      render: (time) => <span>{(time / 60).toFixed(1)} 小时</span>
    },
    {
      title: '收藏数',
      dataIndex: 'favoriteCount',
      key: 'favoriteCount',
      width: 100,
      align: 'center',
      sorter: (a, b) => a.favoriteCount - b.favoriteCount,
      render: (count) => <span>{count}</span>
    },
    {
      title: '会员等级',
      dataIndex: 'level',
      key: 'level',
      width: 120,
      align: 'center',
      render: (level) => {
        const colorMap = {
          'VIP': 'gold',
          '学生': 'green',
          '普通': 'default'
        }
        return <Tag color={colorMap[level]}>{level}</Tag>
      }
    }
  ]

  // 热门分类表格列
  const categoryColumns = [
    {
      title: '排名',
      dataIndex: 'rank',
      key: 'rank',
      width: 80,
      align: 'center',
      render: (rank) => {
        if (rank <= 3) {
          const colors = ['#faad14', '#d9d9d9', '#d4b106']
          return (
            <div className="rank-badge" style={{ color: colors[rank - 1] }}>
              <TrophyOutlined />
              <span>{rank}</span>
            </div>
          )
        }
        return <span className="rank-number">{rank}</span>
      }
    },
    {
      title: '分类名称',
      dataIndex: 'categoryName',
      key: 'categoryName',
      width: 150,
      render: (name) => <span className="category-name">{name}</span>
    },
    {
      title: '图书数量',
      dataIndex: 'bookCount',
      key: 'bookCount',
      width: 120,
      align: 'center',
      sorter: (a, b) => a.bookCount - b.bookCount,
      render: (count) => <span>{count.toLocaleString()}</span>
    },
    {
      title: '总阅读量',
      dataIndex: 'readCount',
      key: 'readCount',
      width: 150,
      align: 'center',
      sorter: (a, b) => a.readCount - b.readCount,
      render: (count) => <span className="highlight-number">{count.toLocaleString()}</span>
    },
    {
      title: '读者数量',
      dataIndex: 'readerCount',
      key: 'readerCount',
      width: 120,
      align: 'center',
      sorter: (a, b) => a.readerCount - b.readerCount,
      render: (count) => <span>{count.toLocaleString()}</span>
    },
    {
      title: '平均评分',
      dataIndex: 'avgRating',
      key: 'avgRating',
      width: 120,
      align: 'center',
      render: (rating) => (
        <div className="rating-score">
          <StarOutlined style={{ color: '#faad14', marginRight: 4 }} />
          <span>{rating}</span>
        </div>
      )
    }
  ]

  const tabItems = [
    {
      key: 'books',
      label: (
        <span>
          <BookOutlined />
          热门图书
        </span>
      ),
      children: (
        <Table
          columns={bookColumns}
          dataSource={popularBooks}
          pagination={false}
          scroll={{ x: 1000 }}
        />
      )
    },
    {
      key: 'readers',
      label: (
        <span>
          <UserOutlined />
          活跃读者
        </span>
      ),
      children: (
        <Table
          columns={readerColumns}
          dataSource={popularReaders}
          pagination={false}
          scroll={{ x: 900 }}
        />
      )
    },
    {
      key: 'categories',
      label: (
        <span>
          <FireOutlined />
          热门分类
        </span>
      ),
      children: (
        <Table
          columns={categoryColumns}
          dataSource={popularCategories}
          pagination={false}
          scroll={{ x: 900 }}
        />
      )
    }
  ]

  return (
    <div className="popular-content-container">
      {/* 统计卡片 */}
      <div className="stats-cards">
        <Card className="stat-card">
          <div className="stat-content">
            <div className="stat-info">
              <div className="stat-label">热门图书</div>
              <div className="stat-value">156</div>
            </div>
            <div className="stat-icon books">
              <BookOutlined />
            </div>
          </div>
        </Card>
        <Card className="stat-card">
          <div className="stat-content">
            <div className="stat-info">
              <div className="stat-label">活跃读者</div>
              <div className="stat-value">8,542</div>
            </div>
            <div className="stat-icon readers">
              <UserOutlined />
            </div>
          </div>
        </Card>
        <Card className="stat-card">
          <div className="stat-content">
            <div className="stat-info">
              <div className="stat-label">总阅读量</div>
              <div className="stat-value">156K</div>
            </div>
            <div className="stat-icon views">
              <EyeOutlined />
            </div>
          </div>
        </Card>
        <Card className="stat-card">
          <div className="stat-content">
            <div className="stat-info">
              <div className="stat-label">平均评分</div>
              <div className="stat-value">8.9</div>
            </div>
            <div className="stat-icon rating">
              <StarOutlined />
            </div>
          </div>
        </Card>
      </div>

      {/* 排行榜 */}
      <Card className="ranking-card">
        <div className="ranking-header">
          <h3>内容排行榜</h3>
          <Space>
            <Select
              value={timeRange}
              onChange={setTimeRange}
              style={{ width: 120 }}
            >
              <Select.Option value="day">今日</Select.Option>
              <Select.Option value="week">本周</Select.Option>
              <Select.Option value="month">本月</Select.Option>
              <Select.Option value="year">今年</Select.Option>
            </Select>
            <RangePicker />
          </Space>
        </div>

        <Tabs
          activeKey={activeTab}
          onChange={setActiveTab}
          items={tabItems}
          size="large"
        />
      </Card>
    </div>
  )
}

export default PopularContent
